/**
 * Created by tianjie on 2017/11/29.
 */
$(function () {
    online.init();
})

var online = {
    URL : {
        getExpendRoomCard:function(){
            return "/admin/statistics/getExpendRoomCard";      //货币消耗
        },
        getRoomCard:function(){
            return "/admin/statistics/getRoomCard";      //货币产出
        }
    },
    init:function(){
        common.initDateTimeRange();//  初始化时间控件
        var day = getNowFormatDate();
        $('#dateTimeRange').val(day+" 至 "+day);
        getData();  //请求货币消耗后台数据 组装折线图
        outputData();   //请求货币产出后台数据 组装折线图
    }
};

function query() {
    getData();
    outputData();
}

/**
 * 清除时间
 */
function begin_end_time_clear() {
    $('#dateTimeRange').val('');
    $('#beginTime').val('');
    $('#endTime').val('');
}

/********************** 以下货币消耗折线图 *******************************/

var myChart = echarts.init(document.getElementById('main'),'macarons');
var colors = ['#5793f3', '#d14a61', '#675bba'];

var initChart = function(data){
    Highcharts.chart('main', {
        chart: {
            type: 'line'
        },
        title: {
            text:null
        },
        tooltip: {
            shared: true,
            crosshairs: [{
                width: 1,
                dashStyle: 'Dot',
                color: 'green'
            }]
        },
        credits: {
            enabled: false
        },
        legend: {
            align: 'center',
            verticalAlign: 'top'
        },
        xAxis: [
            {
                categories: data.xAxis,
                tickInterval: 3,
                labels: {
                    format: '{value}',
                    style: {
                        color:'#008ACD'
                    }
                }
            }
        ],
        yAxis: {
            title: {
                text:null
            },
            labels: {
                style: {
                    color:'#008ACD'
                }
            }
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled:true,
                    radius: 2,
                    lineColor: '#D14A61',
                    fillColor:'#fff',
                    symbol: 'circle', //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，
                    lineWidth: 1
                }
            },
            line: {
                dataLabels: {
                    enabled: true          // 开启数据标签
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        },
        series: [{
            name: '房卡消耗',
            type: 'spline',
            data:data.roomCardData,
            color: '#7CB5EC'
        }, {
            name: '游戏币消耗',
            type: 'spline',
            data:data.gameCurrencyData,
            color: '#8085E9'
        }, {
            name: '充值币消耗',
            type: 'spline',
            data:data.rechargeMoneyData,
            color: '#8085E9'
        }]
    });
};

// var initChart = function(data){
//     myChart.setOption({
//         color: colors,
//
//         tooltip: {
//             trigger: 'none',
//             axisPointer: {
//                 type: 'cross'
//             }
//         },
//         legend: {
//             data:['房卡消耗', '游戏币消耗', '充值币消耗']
//         },
//         grid: {
//             top: 70,
//             bottom: 50
//         },
//         xAxis: [
//             // {
//             //     type: 'category',
//             //     axisTick: {
//             //         alignWithLabel: true
//             //     },
//             //     axisLine: {
//             //         onZero: false,
//             //         lineStyle: {
//             //             color: colors[0]
//             //         }
//             //     },
//             //     axisPointer: {
//             //         label: {
//             //             formatter: function (params) {
//             //                 return '房卡消耗  ' + params.value
//             //                     + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
//             //             }
//             //         }
//             //     },
//             //     data: data.xAxis
//             // },
//             // {
//             //     type: 'category',
//             //     axisTick: {
//             //         alignWithLabel: true
//             //     },
//             //     axisLine: {
//             //         onZero: false,
//             //         lineStyle: {
//             //             color: colors[1]
//             //         }
//             //     },
//             //     axisPointer: {
//             //         label: {
//             //             formatter: function (params) {
//             //                 return '游戏币消耗  ' + params.value
//             //                     + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
//             //             }
//             //         }
//             //     },
//             //     data: data.xAxis
//             // },
//             // {
//             //     type: 'category',
//             //     axisTick: {
//             //         alignWithLabel: true
//             //     },
//             //     axisLine: {
//             //         onZero: false,
//             //         lineStyle: {
//             //             color: colors[2]
//             //         }
//             //     },
//             //     axisPointer: {
//             //         label: {
//             //             formatter: function (params) {
//             //                 return '充值币消耗  ' + params.value
//             //                     + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
//             //             }
//             //         }
//             //     },
//             //     data: data.xAxis
//             // }
//             {
//                 data: data.xAxis
//             }
//         ],
//         yAxis: [
//             {
//                 type: 'value',
//                 boundaryGap: ['0%', '20%']//是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
//             }
//         ],
//         series: [
//             {
//                 name:'房卡消耗',
//                 type:'line',
//                 smooth: true,
//                 label:{normal:{show:true}},
//                 data: data.roomCardData
//             },
//             {
//                 name:'游戏币消耗',
//                 type:'line',
//                 smooth: true,
//                 label:{normal:{show:true}},
//                 data: data.gameCurrencyData
//             },
//             {
//                 name:'充值币消耗',
//                 type:'line',
//                 smooth: true,
//                 label:{normal:{show:true}},
//                 data: data.rechargeMoneyData
//             }
//         ]
//     });
// };
/********************** 结束 *******************************/

/********************** 以下货币产出折线图 *******************************/

var getChart = echarts.init(document.getElementById('get'),'macarons');

var initGetChart = function(data){
    Highcharts.chart('get', {
        chart: {
            type: 'line'
        },
        title: {
            text:null
        },
        tooltip: {
            shared: true,
            crosshairs: [{
                width: 1,
                dashStyle: 'Dot',
                color: 'green'
            }]
        },
        credits: {
            enabled: false
        },
        legend: {
            align: 'center',
            verticalAlign: 'top'
        },
        xAxis: [
            {
                categories: data.xAxis,
                tickInterval: 3,
                labels: {
                    format: '{value}',
                    style: {
                        color:'#008ACD'
                    }
                }
            }
        ],
        yAxis: {
            title: {
                text:null
            },
            labels: {
                style: {
                    color:'#008ACD'
                }
            }
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled:true,
                    radius: 2,
                    lineColor: '#D14A61',
                    fillColor:'#fff',
                    symbol: 'circle', //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，
                    lineWidth: 1
                }
            },
            line: {
                dataLabels: {
                    enabled: true          // 开启数据标签
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        },
        series: [{
            name: '房卡产出',
            type: 'spline',
            data:data.roomCardData,
            color: '#7CB5EC'
        }, {
            name: '游戏币产出',
            type: 'spline',
            data:data.gameCurrencyData,
            color: '#8085E9'
        }, {
            name: '充值币产出',
            type: 'spline',
            data:data.rechargeMoneyData,
            color: '#8085E9'
        }]
    });
};
// var initGetChart = function(data){
//     getChart.setOption({
//         color: colors,
//
//         tooltip: {
//             trigger: 'none',
//             axisPointer: {
//                 type: 'cross'
//             }
//         },
//         legend: {
//             data:['房卡产出', '游戏币产出', '充值币产出']
//         },
//         grid: {
//             top: 70,
//             bottom: 50
//         },
//         xAxis: [
//             {
//                 data: data.xAxis
//             }
//         ],
//         yAxis: [
//             {
//                 type: 'value',
//                 boundaryGap: ['0%', '20%']//是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
//             }
//         ],
//         series: [
//             {
//                 name:'房卡产出',
//                 type:'line',
//                 smooth: true,
//                 label:{normal:{show:true}},
//                 data: data.roomCardData
//             },
//             {
//                 name:'游戏币产出',
//                 type:'line',
//                 smooth: true,
//                 label:{normal:{show:true}},
//                 data: data.gameCurrencyData
//             },
//             {
//                 name:'充值币产出',
//                 type:'line',
//                 smooth: true,
//                 label:{normal:{show:true}},
//                 data: data.rechargeMoneyData
//             }
//         ]
//     });
// };
/********************** 结束 *******************************/

//加载货币产出表
function initGetTable(data) {
    $("#get-table").html("");
    var num = data.xAxis.length;
    var str = "<thead><tr><th>#</th><th>查询日期</th><th>房卡产出</th><th>游戏币产出</th><th>" +
        "充值币产出</th></tr></thead><tbody>";
    $.each(data.xAxis, function (i, n) {
        str += "<tr><td>"+(i+1)+"</td><td>"+data.xAxis[num-1-i]+"</td><td>"+data.roomCardData[num-1-i]+
            "</td><td>"+data.gameCurrencyData[num-1-i]+"</td><td>"+data.rechargeMoneyData[num-1-i]+"</td></tr>";
    });
    $("#get-table").append(str);
}

//加载货币消耗表
function initRoomCardTable(data) {
    $("#demo-table").html("");
    var num = data.xAxis.length;
    var str = "<thead><tr><th>#</th><th>查询日期</th><th>房卡消耗</th><th>游戏币消耗</th><th>" +
        "充值币消耗</th></tr></thead><tbody>";
    $.each(data.xAxis, function (i, n) {
        str += "<tr><td>"+(i+1)+"</td><td>"+data.xAxis[num-1-i]+"</td><td>"+data.roomCardData[num-1-i]+
            "</td><td>"+data.gameCurrencyData[num-1-i]+"</td><td>"+data.rechargeMoneyData[num-1-i]+"</td></tr>";
    });
    $("#demo-table").append(str);
}

//请求货币产出后台数据
var outputData = function(){
    var beginTime = $('#beginTime').val();
    var endTime = $('#endTime').val();
    var time = $('#dateTimeRange').val();
    /** 不知道怎么回事 首次进入页面点击今日时会出现beginTime endTime为空的情况 在这里特殊处理下 ***/
    if(beginTime==""||endTime==""){
        //2017-05-26 至 2017-05-26
        beginTime = time.substring(0,10);
        endTime = time.substring(13);
    }
    getChart.showLoading();
    $.ajax({
        url : online.URL.getRoomCard(),
        type:'POST',
        async:true,    //或false,是否异步
        data:{
            beginTime:beginTime,endTime:endTime
        },
        timeout:5000,    //超时时间
        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
        success:function(data,textStatus,jqXHR){
            getChart.hideLoading();
            if(data.code!=0){
                layer.msg(data.msg);
                return false;
            }
            console.log(data);
            initGetChart(data.data);
            initGetTable(data.data);
        },
        error:function(xhr,textStatus){
            myChart.hideLoading();
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        }
    })

};


//请求货币消耗后台数据
var getData = function(){
    var beginTime = $('#beginTime').val();
    var endTime = $('#endTime').val();
    var time = $('#dateTimeRange').val();
    /** 不知道怎么回事 首次进入页面点击今日时会出现beginTime endTime为空的情况 在这里特殊处理下 ***/
    if(beginTime==""||endTime==""){
        //2017-05-26 至 2017-05-26
        beginTime = time.substring(0,10);
        endTime = time.substring(13);
    }
    myChart.showLoading();
    $.ajax({
        url : online.URL.getExpendRoomCard(),
        type:'POST',
        async:true,    //或false,是否异步
        data:{
            beginTime:beginTime,endTime:endTime
        },
        timeout:5000,    //超时时间
        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
        success:function(data,textStatus,jqXHR){
            myChart.hideLoading();
            if(data.code!=0){
                layer.msg(data.msg);
                return false;
            }
            console.log(data);
            initChart(data.data);
            initRoomCardTable(data.data);
        },
        error:function(xhr,textStatus){
            myChart.hideLoading();
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        }
    })

};
//移动端页面调整
window.onresize = function () {
    myChart.resize();
    getChart.resize();
};